<template>
    <div class="table">
        <el-row>
            <el-button icon="el-icon-plus" type="primary" class="mt20 mb20 fl" @click="handleEdit()">新建车厂</el-button>
        </el-row>
        <el-table class="sd" stripe border :data="tableData" :span-method="objectSpanMethod" v-loading="loading">
            <el-table-column align="center" prop="index" label="序号" width="100"></el-table-column>
            <el-table-column align="center" prop="name" label="主机厂名称"></el-table-column>
            <el-table-column align="center" prop="status" label="主机厂状态"></el-table-column>
            <el-table-column align="center" prop="total" label="保单总量"></el-table-column>
            <el-table-column align="center" prop="bxnums" label="避险数"></el-table-column>
            <el-table-column align="center" prop="twnums" label="合作保司数"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" type="text"
                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination class="tpl-mg-t fr mb20"
                        small
                        @size-change="pageSizeChange"
                        @current-change="pageCurrentChange"
                        :current-page="ConflictForm.pageNum"
                        :page-sizes="[10, 20, 30, 40, 50, 100]"
                        :page-size="ConflictForm.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
        </el-pagination>
    </div>
</template>

<script>
    // import service from '../../services/DealerManagement.service'
    // import baseServices from '../../services/BaseData.service'
    // import { baseURL } from '../../app.config'
    export default {
        name: 'carFactoryInfo',
        data () {
            return {
                // 查询表单
                ConflictForm: {
                    pageNum: 1,
                    pageSize: 10
                },
                queryRules: { },
                // 数据总条数
                // total: 0,
                // 表格数据
                tableData: [],
                // T服务状态代码
                TCodeList: {},
                params: {},
                loading: false
            }
        },
        created () {
            this.$nextTick(() => {
                this.queryList()
            });
        },
        mounted (){

        },
        watch: {
            tableData (val){
                for (let i = 0; i < val.length; i++) {
                    const e = val[i];
                    e.twnums = e.twList.length;
                }
            } 
        },
        computed: {
            total() {
                return this.tableData.length;
            }
        },
        methods: {
            handleEdit (i,r) {
                if(i != undefined || r != undefined){
                    this.$routerTo('editCarFactory', { carFactoryData: r, type: 'edit', callback: this.queryList });
                }else{
                    this.$routerTo('editCarFactory', { type: 'add', callback: this.queryList });
                }
            },
            // 点击查询置为第一页
            queryList () {
                let cData = JSON.parse(localStorage.getItem('carFactoryData'));
                if(!cData){
                    cData = [
                        {"index": "1","name": "吉利汽车","status": "在册","total": "2,345,678","bxnums": "52,678","twnums": "5","twList": ["阳光保险","太平保险"]},
                        {"index": "2","name": "长城汽车","status": "在册","total": "123,456","bxnums": "27,283","twnums": "6","twList": ["阳光保险","太平保险"]},
                        {"index": "3","name": "东风汽车","status": "在册","total": "126,129","bxnums": "83,739","twnums": "7","twList": ["阳光保险","太平保险"]},
                        {"index": "4","name": "恒大汽车","status": "注销","total": "172,289","bxnums": "37,837","twnums": "8","twList": ["阳光保险","太平保险"]}
                    ]
                }
                localStorage.setItem('carFactoryData', JSON.stringify(cData));
                this.tableData = cData;
            },
            // 重置表单
            reset () {
                this.ConflictForm.phone = ''
                this.ConflictForm.name = ''
                this.ConflictForm.pageNum = 1
                this.ConflictForm.pageSize = 10
                this.queryList1()
            },
            // 每页显示条数
            pageSizeChange (val) {
                let pages = Math.ceil(this.total / val)
                this.ConflictForm.pageSize = val
                this.params.pageSize = val
                if (this.ConflictForm.pageNum > pages) {
                    this.ConflictForm.pageNum = 1
                    this.params.pageNum = 1
                }
                this.queryList()
            },
            // 当前页码
            pageCurrentChange (val) {
                this.ConflictForm.pageNum = val
                this.params.pageNum = val
                this.queryList()
            },
            // 合并单元格
            objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
                if (columnIndex < 5) {
                    if (row.merge && row.merge > 1) {
                        return [row.merge, 1]
                    } else if (row.merge && row.merge === -1) {
                        return [0, 0]
                    } else {
                        return [1, 1]
                    }
                }
            }
        }
    }
</script>

<style scoped>
</style>
